import { Card, Col, Layout, Row } from 'antd';
import Search from 'antd/es/input/Search';
import { Content } from 'antd/es/layout/layout';
import React, { useState } from 'react';
import styles from './Home.less';

type tabKeyType = 'all' | 'wish' | 'doing' | 'collect';

const operationTabList = [
    {
        key: 'all',
        tab: (
            <span>
                全部 <span style={{ fontSize: 14 }}>(8)</span>
            </span>
        ),
    },
    {
        key: 'wish',
        tab: (
            <span>
                未观看 <span style={{ fontSize: 14 }}>(8)</span>
            </span>
        ),
    },
    {
        key: 'doing',
        tab: (
            <span>
                正在看 <span style={{ fontSize: 14 }}>(8)</span>
            </span>
        ),
    },
    {
        key: 'collect',
        tab: (
            <span>
                已看完 <span style={{ fontSize: 14 }}>(8)</span>
            </span>
        ),
    },
];

const FilmTelevision: React.FC = () => {
    const [tabKey, setTabKey] = useState<tabKeyType>('all');
    const [loading, setLoading] = useState<boolean>(false);

    // 渲染tab切换
    const renderChildrenByTabKey = (tabValue: tabKeyType) => {
        // if (tabValue === 'all') {
        //     return <DoubanCardList />;
        // }
        // if (tabValue === 'wish') {
        //     return <DoubanCardList />;
        // }
        // if (tabValue === 'doing') {
        //     return <DoubanCardList />;
        // }
        // if (tabValue === 'collect') {
        //     return <DoubanCardList />;
        // }
        return null;
    };

    return (
        <>
            <Layout>
                <div className={styles.searchHeader}>
                    <Search
                        prefix="🔍"
                        style={{ verticalAlign: 'middle', width: '45%' }}
                        placeholder="请输入关键字"
                        enterButton="搜索"
                        size="large"
                        allowClear
                        loading={loading}
                    />
                </div>
                <Content>
                    <Row gutter={24}>
                        <Col lg={24} md={24}>
                            <Card
                                className={styles.tabsCard}
                                bordered={false}
                                tabList={operationTabList}
                                activeTabKey={tabKey}
                                onTabChange={(_tabKey: string) => {
                                    setTabKey(_tabKey as tabKeyType);
                                }}
                            >
                                {renderChildrenByTabKey(tabKey)}
                            </Card>
                        </Col>
                    </Row>
                </Content>
            </Layout>
        </>
    );
};

export default FilmTelevision;
